<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <template v-slot:header>短信配置</template>
            <el-form ref="form" :model="form" label-width="120px">

                <el-form-item label="驱动选择">
                    <el-radio-group v-model="form.type">
                        <el-radio label="aliyun">阿里云</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-slot:header>阿里云</template>
                <el-alert type="info" class="mb-3 border text-md" closable>
                    <div class="text-md">
                        1. 请访问阿里云后台获取
                        <a class="text-primary" href="https://dysms.console.aliyun.com/dysms.htm#/domestic/text/sign">
                            https://dysms.console.aliyun.com/dysms.htm#/domestic/text/sign
                        </a>
                        <br/>
                        2. 短信模块必须存在以下变量： product:网站名称，code:验证码，系统会在发送验证码时自动设置数据
                    </div>
                </el-alert>

                <el-form-item label="短信签名">
                    <el-input v-model="form.sign" placeholder="请登录阿里云查看短信签名"></el-input>
                    <hd-tip>
                        阿里云签名列表
                        <a href="https://dysms.console.aliyun.com/dysms.htm#/domestic/text/sign">
                            https://dysms.console.aliyun.com/dysms.htm#/domestic/text/sign
                        </a>
                    </hd-tip>


                </el-form-item>

                <el-form-item label="验证码模板">
                    <el-input v-model="form.template" placeholder="请登录阿里云查看获取验证码模板"></el-input>
                    <hd-tip>
                        阿里云模板列表
                        <a href="https://dysms.console.aliyun.com/dysms.htm#/domestic/text/template">
                            https://dysms.console.aliyun.com/dysms.htm#/domestic/text/template
                        </a>
                    </hd-tip>
                </el-form-item>
                <el-form-item label="accessKeyId">
                    <el-input v-model="form.access_id" placeholder=""></el-input>
                    <hd-tip>
                        请登录阿里云访问控制控制台查看
                        <a href="https://ram.console.aliyun.com/users">
                            https://ram.console.aliyun.com/users
                        </a>
                    </hd-tip>
                </el-form-item>
                <el-form-item label="accessKeySecret">
                    <el-input v-model="form.access_secret" placeholder="秘钥"></el-input>
                </el-form-item>
            </el-form>
            <el-card class="box-card mb-3">
                <hd-alert :alert="{type:'success'}">发送测试短信查看手机是否接收到预约短信</hd-alert>
                <el-form ref="data" :model="data" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="data.name" placeholder="预约姓名"></el-input>
                        <hd-error name="name"></hd-error>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="data.mobile" placeholder="预约手机号"></el-input>
                        <hd-error name="mobile"></hd-error>

                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="data.address" placeholder="预约地址"></el-input>
                        <hd-error name="address"></hd-error>

                    </el-form-item>
                    <el-button type="danger" size="mini" @click="test" class="my-4">测试发送</el-button>
                </el-form>
            </el-card>
            <el-button type="success" @click="onSubmit">提交</el-button>
        </el-card>

    </div>
</template>

<script>

export default {
    route: {path: 'sms/config', meta: {title: '短信配置'}},
    data() {
        return {
            form: {},
            data: {}
        }
    },
    async created() {
        this.form = await this.axios.get('admin/sms')
    },
    methods: {
        async test() {
            this.data = Object.assign(this.data, {service_id: 1})
            await this.axios.post('admin/order', this.data)
        },
        async onSubmit() {
            await this.axios.put('admin/sms', this.form)
        }
    }
}
</script>

<style></style>
